<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Renshuu Font Replacer (unofficial) Options</title>
	<link rel="stylesheet" style="text/css" href="styles.css" />
	<script src="knockout-2.3.0.js"></script>
	<script src="optionsStore.js"></script>
	<style>
		body,p {
			font-family: 'Segoe UI', Tahoma, sans-serif;
			font-size: 16px;
		}

		h1 {
			margin: 0;
			padding: 13px 0 13px;
			font-size: 18px;
			font-weight: normal;
			line-height: 18px;
			border-bottom: 1px solid #eee;
		}

		h2 {
			margin: 0;
			padding: 13px 0 0;
			font-size: 16px;
			font-weight: bold;
			line-height: 16px;
		}

		.fonts {
			border-spacing: 0;
		}

			.fonts th {
				border-bottom: 2px solid #eee;
				padding: 0px 5px;
				font-size: 12px;
			}

			.fonts td {
				border-bottom: 1px solid #eee;
				padding: 5px 5px;
				font-size: 22pt;
			}

			.input,
			.header,
			.fonts th {
				font-size: 16px !important;
				font-family: 'Segoe UI' !important;
			}

			.fonts .input {
				text-align: center;
			}

		.header {
			text-align: right;
		}
	</style>
</head>
<body>
	<h1>Renshuu Font Replacer (unofficial) Options</h1>
	<h2>General</h2>
	<table>
		<tr>
			<td class="header">Replace fonts on Question Box</td>
			<td>
				<input type="checkbox" data-bind='checked: replaceOnQuestionBox' />
			</td>
		</tr>
		<tr>
			<td class="header">Replace fonts on Answers</td>
			<td>
				<input type="checkbox" data-bind='checked: replaceOnAnswers' />
			</td>
		</tr>
		<tr>
			<td class="header">Randomize once per question</td>
			<td>
				<input type="checkbox" data-bind='checked: randomizeOncePerQuestion' />
			</td>
		</tr>		
		<tr>
			<td class="header">Replace no more than </td>
			<td>
				<select data-bind='value: replaceOnAnswersMax'>
					<option value="1">1 Answer</option>
					<option value="2">2 Answers</option>
					<option value="3">3 Answers</option>
					<option value="4">4 Answers</option>
				</select>
			</td>
		</tr>
	</table>
	<h2>Fonts</h2>
	<table class="fonts">
		<tr>
			<th>Font</th>
			<th>Chance</th>
			<th>Kanji Only</th>
			<th colspan="34">Sample</th>
		</tr>
		<tbody data-bind="foreach: fonts">
			<tr data-bind="attr: { style: css }">
				<td class="header"><span data-bind="text: name"></span></td>
				<td class="input">
					<select data-bind='value: chance'>
						<option value="0">Off</option>
						<option value="1">1</option>
						<option value="2">2</option>
						<option value="3">3</option>
						<option value="4">4</option>
						<option value="5">5</option>
						<option value="6">6</option>
						<option value="7">7</option>
						<option value="8">8</option>
						<option value="9">9</option>
						<option value="10">10</option>
					</select>
				</td>
				<td class="input">
					<input type="checkbox" data-bind='checked: kanjiOnly' />
				</td>
				<td>あ</td>
				<td>い</td>
				<td>う</td>
				<td>え</td>
				<td>お</td>
				<td>ア</td>
				<td>イ</td>
				<td>ウ</td>
				<td>エ</td>
				<td>オ</td>
				<td>か</td>
				<td>さ</td>
				<td>た</td>
				<td>な</td>
				<td>ま</td>
				<td>や</td>
				<td>カ</td>
				<td>サ</td>
				<td>タ</td>
				<td>ナ</td>
				<td>ヤ</td>
				<td>ハ</td>
				<td>一</td>
				<td>二</td>
				<td>三</td>
				<td>四</td>
				<td>五</td>
				<td>月</td>
				<td>学</td>
				<td>会</td>
				<td>語</td>
				<td>謎</td>
				<td>愚</td>
				<td>愛</td>
			</tr>
		</tbody>
	</table>
	<button style="margin: 13px 0 0; padding: 5px 10px; width: 120px" data-bind='click: save'>Save</button>
	<h1>Copyright</h1>
	<p>All fonts belong to their owners</p>
	<ul data-bind="foreach: copyright">
		<li>
			<a data-bind="attr: { href: homepage }"><span data-bind="	text: name"></span></a>
		</li>
	</ul>
	<p>
		<small><i>By Hugo Miranda (<a href="https://rfr.codeplex.com/">Codeplex</a>), licensed under <a href="https://rfr.codeplex.com/license">MIT License</a></i></small>	
	</p>
	<script src="options.js"></script>
</body>
</html>
